<template>
     <div class="qwe">
         <div class="minegeas" v-if="songerdlist.data">
             <div class="haver" :style=" 'background-image: url('+songerdlist.data.artist.cover+')'">
                 <h3>
                     <span class="iconfont icon-zuoyou1" @click="$router.go(-1)"></span>
                     <span class="iconfont "></span>
                     <span class="iconfont "></span>
                     <span></span>
                     <span> 
                         <span class="iconfont icon-guanzhu" v-show="tudreet==false" @click="guanzhu"></span>
                         <span class="iconfont icon-guanzhu tr" v-show="tudreet==true" @click="guanzhu"></span>
                     </span>
                 </h3>
             </div>
             <div class="boxin">
                 <div class="ert">
                    <div class="xinxi" >
                        <div class="mainimg" v-if="songerdlist.data">
                            <div class="img" >
                                <img v-lazy="songerdlist.data.artist.cover" alt="">
                            </div>
                        </div>
                        <div class="tet" v-if="songerdlist.data">
                            <h3>{{songerdlist.data.artist.name}}</h3>
                            <p class="p1"><span>11关注</span>&nbsp;<span>70万粉丝</span>&nbsp;<span>lv7</span></p>
                            <p class="p2" >
                                <span v-for="(le) in songerdlist.data.secondaryExpertIdentiy" :key="le.id">{{le.expertIdentiyName}}</span>
                            </p>
                        </div>
                    </div>
                 </div>
             </div>
             <div class="navsdf">
                 <h3 class="xian">
                     <span class="span"><span @click="indexxian=1" :class="{'con':indexxian==1}">歌曲</span> </span>
                     <span class="span"><span @click="indexxian=2" :class="{'con':indexxian==2}">专辑</span> </span>
                     <span class="span"><span @click="indexxian=3" :class="{'con':indexxian==3}">视频</span> </span>
                     <span class="span"><span @click="indexxian=4" :class="{'con':indexxian==4}">mv</span> </span>
                 </h3>
             </div>
             <div class="lsit">
                 <!-- 歌曲 -->
                 <ul :class="['nml',{'con':indexxian==1}]">
                     <li v-for="(item,index) in danqu.hotSongs" :key="item.id" v-show="index<10" @click="fange(item.id)">
                         <div class="img" v-if="item.al">
                              <!-- <van-image
                             lazy-load
                             :src="item.al.picUrl"
                              /> -->
                             <img v-lazy="item.al.picUrl" alt="">
                         </div>
                         <div class="tex">
                             <h3 class="df">
                                  <span>{{item.name}}</span><span></span><span></span>
                             </h3>
                             <h3 class="po">
                                  <span>{{item.al.name}}</span>
                             </h3>
                         </div>
                         <div class="ionfg">
                             <span class="iconfont icon-bofang"></span>
                         </div>
                     </li>
                 </ul>
                 <!-- 专辑 -->
                  <ul :class="['nml',{'con':indexxian==2}]">
                     <li v-for="( item,index ) in zhuanju.hotAlbums" :key="item.id" v-show="index<9">
                         <div class="img" >
                            <!-- <van-image
                             lazy-load
                             :src="item.blurPicUrl"
                              /> -->
                             <img v-lazy="item.blurPicUrl" alt="">
                         </div>
                         <div class="tex">
                              <h3 class="df">
                                  <span>{{item.name}}</span><span></span><span></span>
                             </h3>
                             <h3 class="po">
                                  <span>{{item.subType}}</span>
                             </h3>
                             <!-- <h3>
                                  <span>{{item.name}}</span><span>&nbsp;</span><span>{{item.subType}}</span>
                             </h3> -->
                         </div>
                     </li>
                 </ul>
                 <!-- 视频 -->
                 <ul :class="['nml',{'con':indexxian==3}]" v-if="shipin>0">
                     <li>
                         <div class="img" >
                              <!-- <img src="" alt=""> -->
                         </div>
                         <div class="tex">
                             <h3>
                                  <span></span><span></span><span></span>
                             </h3>
                         </div>
                     </li>
                 </ul> 
                 <!-- mv -->
                 <ul :class="['nml',{'con':indexxian==4}]">
                     <li v-for="(item,index) in gemvlist.mvs" :key="item.id" v-show="index<10" @click="fangmv(item.id)">
                         <div class="img" >
                              <!-- <van-image
                             lazy-load
                             :src="item.imgurl"
                              /> -->
                             <img v-lazy="item.imgurl" alt="">
                         </div>
                         <div class="tex">
                             <!-- <h3>
                                  <span>{{item.name}}</span><span>&nbsp;</span><span>{{item.publishTime}}</span>
                             </h3> -->
                             <h3 class="df">
                                  <span>{{item.name}}</span><span></span><span></span>
                             </h3>
                             <h3 class="po">
                                  <span>{{item.publishTime}}</span>
                             </h3>
                            
                         </div>
                     </li>
                 </ul>
             </div>
         </div>
     </div>
</template>

<script>
import {getonsgerss,getonsgersartit, getonsgersartitmv,getonsgersartitalbum,getonsgersartitshipin,getonsgerfoll} from "../../api/songerss"
import { Toast } from 'vant';
export default {
        data(){
            return{
                songerdlist:{},
                danqu:{},
                zhuanju:{},
                gemvlist:{},
                indexxian:1,
                tudreet:false,
                songerId:null,
                shipin:{}

            }
        },
        methods:{
            //mvs
            //artist.name
            //secondaryExpertIdentiy  expertIdentiyName
            getsonerxiangqing(){
                //歌手详情
                getonsgerss({
                    id:this.songerId
                }).then(data=>{
                    // console.log(data)
                    this.songerdlist =data;
                    // console.log(this.songerdlist.data)
                })
                //歌手单曲
                getonsgersartit({
                     id:this.songerId
                }).then(data=>{
                    console.log("歌手单曲",data)
                    this. danqu=data
                })
                //获取歌手 mv
                getonsgersartitmv({
                     id:this.songerId
                }).then(data=>{
                    console.log("歌手 mv",data)
                    this.gemvlist = data 
                })
                //获取歌手专辑
                getonsgersartitalbum({
                    id:this.songerId
                }).then(data=>{
                    console.log("歌手专辑",data)
                    this.zhuanju=data;
                })
                //获取歌手视频
                getonsgersartitshipin({
                     id:this.songerId,
                     order:0,
                     cursor:0
                }).then(data=>{
                    console.log("视频",data)
                })
            },
            //关注
            guanzhu(){
                // console.log("123")
                this.tudreet =! this.tudreet;
                if(this.tudreet==true){
                      Toast("关注");
                     getonsgerfoll({
                        id:this.songerId,
                        t:1
                    }).then(data=>{
                        console.log(data)
                    })
                }else{
                    getonsgerfoll({
                        id:this.songerId,
                        t:0
                    }).then(data=>{
                        console.log(data)
                    })
                     Toast("取消关注");
                }
               
            },
            fange(id){
                console.log("歌曲",id)
                // console.log()
                this.$emit("get-player-id",id)
                this.$emit("get-play-all-id",this.$route.query.id);//传递di
            },
            fangmv(id){
                console.log("mv",id)
                 this.$emit("getmvplay-id",id)
            //   getmvlist({id:id}).then(data=>{
            // console.log(data)
            //   })
            }
        },
        created(){
             this.songerId = this.$route.query.id;
            this.getsonerxiangqing()
        }
}
</script>

<style  lang="less">
.qwe{
    width: 100%;
    height: 100%;
     position: fixed;
        overflow-y: scroll;
      background-color: #f4f4f4;
}
.minegeas{
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    .haver{
        width: 100%;
        height: 260px;
        //  background-image: url(https://p2.music.126.net/aG5zqxkBRfLiV7A8W0iwgA==/109951166702962263.jpg);
         background-size: 100%;
        h3{
            width:100%;
            height:40px;
            display:flex;
            color: white;
            span{
                display:both;
                width:20%;
                height:100%;
                text-align: center;
                line-height: 40px;
                span{
                    &.tr{
                        color: red;
                    }
                }
                &.icon-zuoyou1{
                    padding-left: 10px;
                    box-sizing: border-box;
                    text-align:left;
                }
                
            }
        }
    }
    .boxin{
        width: 90%;
        margin: auto;
        height: 170px;
        position: relative;
        .ert{
            width: 100%;
            height: 100%;
        }
    }
}
 .xinxi{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    border-radius: 10px;
    left: 0;
    top: -20px;
    .mainimg{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: auto;
        position: relative;
         left: 0;
         top: -20px;
        .img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: -10px;
            border-radius: 50%;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
    }
    .tet{
        width:100%;
        height: 100px;
        position: relative;
        left: 0;
        top: -20px;
        h3{
            width: 100%;
            height: 40px;
            font-weight: 400;
            font-size: 28px;
            text-align: center;
            line-height: 40px;
        }
        p{
            color:#c7c7c7;
            margin-top: 7px;
            &.p1{
                width: 100%;
                height: 20px;
                font-size: 14px;
                text-align: center;
            }
            &.p2{
                width: 100%;
                height: 30px;
                font-size: 16px;
                text-align: center;
                // display: flex;
                // justify-content: space-between;
                span{
                    margin-left: 3px;
                    margin-right: 3px;
                }
            }
        }
    }
  
  }
  .navsdf{
      width: 100%;
    //   he
    .xian{
        width: 100%;
        height: 40px;
        display: flex;
        padding-right: 10px;
        padding-left: 10px;
        box-sizing: border-box;
        justify-content: space-between;
        span.span{
            display: block;
            height: 100%;
            width: 25%;
            text-align: center;
            line-height: 40px;
            span{
                &.con{
                    border-bottom:2px solid red;
                }
            }
        }
    }
  }
  .lsit{
     width: 100%;
    //  padding: 10px;
     box-sizing: border-box;
     ul.nml{
         width: 100%;
         display: none;
         border-radius: 10px;
         
         &.con{
             display: block;
         }
         li{
             width: 100%;
             height: 60px;
             padding: 10px;
             margin-top: 1px;
             background-color: #fff;
             box-sizing: border-box;
            //  border-bottom: 1px solid #c7c7c7;
             display: flex;
             .img{
                 width: 15%;
                 height: 100%;
                 overflow: hidden;
                 img{
                     width:40px;
                     height:40px;
                     border-radius: 10px;
                 }
             }
             .tex{
                 width: 80%;
                 height: 100%;
                 h3{
                     width: 100%;
                     height: 22px;
                     overflow:hidden;
                     font-weight: 400;
                     &.df{
                        font-size: 16px;
                     }
                     &.po{
                        font-size: 12px;
                     }

                 }
             }
            .ionfg{
                 width: 10%;
                 height: 100%;
                 text-align: right;
                 line-height: 40px;
                 span{
                     &.iconfont{
                         font-size: 22px;
                     }
                 }
             }
         }
     }
   }
  
</style>